<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery canvas验证码</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html {
				width: 100%;
				height: 100%;
				font-size: 16px;
			}

			body {
				width: 100%;
				height: 100%;
				-moz-user-select: none;
				/*火狐*/
				/*禁止用户在页面选择文字*/
				-webkit-user-select: none;
				/*webkit浏览器*/
				-ms-user-select: none;
				/*IE10*/
				-khtml-user-select: none;
				/*早期浏览器*/
				user-select: none;
			}

			.code {
				padding-top: 50px;
				width: 400px;
				margin: 0 auto;
			}

			.input-val {
				width: 295px;
				background: #ffffff;
				height: 2.8rem;
				padding: 0 2%;
				border-radius: 5px;
				border: none;
				border: 1px solid rgba(0, 0, 0, .2);
				font-size: 1.0625rem;
			}

			#canvas {
				float: right;
				display: inline-block;
				border: 1px solid #ccc;
				border-radius: 5px;
				cursor: pointer;
			}

			.btn {
				width: 100px;
				height: 40px;
				background: #f1f1f1;
				border: 1px solid #ccc;
				border-radius: 5px;
				margin: 20px auto 0;
				display: block;
				font-size: 1.2rem;
				color: #e22e1c;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="code">
			<input type="text" value="" placeholder="请输入验证码（不区分大小写）" class="input-val" />
			<canvas id="canvas" width="100" height="43"></canvas>
			<button class="btn">提交</button>

		</div>
	</body>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="js/code.js"></script>
	<script>
		$(function() {
			code_draw();
			// 点击后刷新验证码
			$("#canvas").on('click', function() {
				code_draw();
			})
			
			$(".btn").on('click', function() {
				// 将输入的内容转为大写，可通过这步进行大小写验证
				var val = $(".input-val").val().toLowerCase();
				// 获取生成验证码值
				var num = $('#canvas').attr('data-code');
				if (val == '') {
					alert('请输入验证码！');
				} else if (val == num) {
					alert('提交成功！');
					$(".input-val").val('');
					draw(show_num);
			
				} else {
					alert('验证码错误！请重新输入！');
					$(".input-val").val('');
					draw(show_num);
				}
			})
		})
	</script>
</html>
